<template>
  <div class="newAddress-page">
    <!-- <wrap-js src="http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/js/mui.min.js"></wrap-js> -->
    <wrap-css href="http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/css/mui.min.css"></wrap-css>
    <wrap-css href="http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/css/mui.picker.min.css"></wrap-css>
    <wrap-css href="http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/css/mui.poppicker.css"></wrap-css>
    <div class="main-content">
      <div class="address-wrap">
        <table>
          <tr>
            <td>收货人：</td>
            <td>
              <input type="text" placeholder="请输入姓名" name="gName" v-model="fromData.gName">
            </td>
          </tr>
          <tr class="placeholder"></tr>
          <tr>
            <td>联系方式：</td>
            <td>
              <input type="number" placeholder="请输入手机号码" name="gTel" v-model="fromData.gTel">
            </td>
          </tr>
          <tr class="placeholder"></tr>
          <tr>
            <td>所在地区：</td>
            <td>
              <input type="text" placeholder="请输入所在地区" id="cityInput" name="gCity" readonly="readonly" v-on:click="showPicker">
            </td>
          </tr>
          <tr class="placeholder"></tr>
          <tr>
            <td>详细地址：</td>
            <td>
              <textarea rows="2" placeholder="请输入详细地址" id="detailAddr" v-model="fromData.detailAddr"></textarea>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="page-button-group">
      <!-- <mt-button size="large" type="primary" v-on:click="submit">提交</mt-button> -->
      <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/saveInfo.png" @click="submit()">
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import wrapJs from "components/wrapJs"
import wrapCss from "components/wrapCss"
import { postDeliveryInfo } from "api/delivery"
import { checkZhName, checkPhone } from "common/utils"

import { Toast, Indicator, MessageBox } from 'mint-ui';
import { wxshare } from 'common/mixin';

export default {
  mixins: [wxshare],
  data() {
    return {
      fromData: {
        gName: '',
        gTel: '',
        detailAddr: '',
        // province: null,
        // city: null,
        area: null,
        addresscode: ''
      },
      picker: null,
      btnDisable: false
    }
  },
  async created() {
    let isMuiDone = await this.$loadScript('http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/js/mui.min.js', 'mui', 10000, 10);
    this.$loadScript('http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/js/city.data-3.js', 'cityData3', 10000, 10);
    let isPickDone;
    if (isMuiDone) {
      isPickDone = await this.$loadScript('http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/js/mui.picker.min.js', 'picker', 10000, 10)
    }
    if (isPickDone) {
      await this.$loadScript('http://cdn.gee4.cn/zw-wx/v0.0.21/lib/mui/js/mui.poppicker.js', 'poppicker', 10000, 10)
    }
  },
  methods: {
    showPicker() {
      this.picker = new mui.PopPicker({
        layer: 3
      });
      this.picker.setData(cityData3);
      this.picker.show((items) => {
        let text = '';
        if ((items[2] || {}).text) {
          text = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
          $('#cityInput').val(text);
          this.fromData.addresscode = (items[2] || {}).value;
        } else {
          text = (items[0] || {}).text + " " + (items[1] || {}).text;
          $('#cityInput').val(text);
          this.fromData.addresscode = (items[1] || {}).value
        }
        // this.fromData.province = (items[0] || {}).text;
        // this.fromData.city = (items[1] || {}).text;
        this.fromData.area = text;
        console.log('----')
        this.picker.dispose();
      });
    },

    submit() {
      console.log(this.btnDisable);
      if (this.btnDisable) return false;
      this.btnDisable = true;
      if (!checkZhName(this.fromData.gName)) {
        Toast('请输入正确的姓名,名称为2-4位汉字');
        this.btnDisable = false;
        return false
      } else if (!checkPhone(this.fromData.gTel)) {
        Toast('请输入正确的手机号', '温馨提示');
        this.btnDisable = false;
        return false
      } 
      // else if (!(this.fromData.addresscode.length > 4)) {
      //   Toast('请选择地址', '温馨提示');
      //   this.btnDisable = false;
      //   return false
      // }
       else if (!(this.fromData.detailAddr.length > 2)) {
        Toast('请正确填写详细地址', '温馨提示');
        this.btnDisable = false;
        return false
      } else {
        Indicator.open();
        postDeliveryInfo({
          area: this.fromData.area,
          receivingPerson: this.fromData.gName,
          receivingPhone: this.fromData.gTel,
          detailAddress: this.fromData.detailAddr,
          areaId: this.fromData.addresscode,
        }).then((data) => {
          Indicator.close();
          MessageBox.alert('保存收货地址成功！', '温馨提示').then(action => {
            history.go(-1)
          });
        }, (msg) => {
          location.go(-1)

        })
      }


    }
  },
  mounted() {

  },
  components: {
    "wrap-js": wrapJs,
    "wrap-css": wrapCss
  },
}
</script>
<style lang="less">
.newAddress-page {
    height: 100%;
    background: #f6f6f6;
    position: relative;
}

.page-button-group {
    width: 80%;
    margin: 10rem auto 0;
    img{
      width:14rem;
    }
}

.main-content {
    // padding-left: 30px;
    padding: 0.95rem 0.9rem;
    tr.placeholder{
      height: .8rem;
      box-shadow:none;
    }
    table {
        width: 100%;
        font-size: 0.8rem;
        color: #383838;
        input,
        textarea {
            height: auto !important;
            border: 0px;
            padding: 0;
            margin: 0;
        }
        tr{
          background: #FFFFFF;
          box-shadow: 0 0.1rem 0.2rem 0 rgba(0,0,0,0.10);
          margin-bottom: .8rem;
        }
        td {
            padding: .7rem .6rem;
            // border-bottom: 1px solid #DBDBDB;
        }
    }
}
</style>
